<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="referrer" content="never">
  <title>新浪新闻摘要</title>
  <style>
    #container .box {
      position: relative;
      width: 91%;
      margin: 0 auto;
    }
    #container .item {
        list-style-type:none;
        width: 280px;
        border: 1px solid #dfdfdf;
        margin: 10px;
        position: absolute;
        opacity: 0;
        transition: all 1s;
        overflow: hidden;
    }
    #container .item.hide {
        position: static;
    }
    #container .item img {
        width: 260px;
        margin: 10px;
        transition: all .5s;
    }
    #container .item img:hover {
      transform: scale(1.1);
    }
    #container .item .title {
        height:25px;
        margin:0 12px;
        font-size: 12px;
        border-bottom:1px solid #dbdbdb;
    }
    #container .item .para {
        margin:10px 15px;
        font-size: 12px;
        line-height:1.8;
        color: #777371;
    }
    /*#container .load {
        color: transparent;
    }*/
    #container .btn {
      width: 100px;
      height: 50px;
      line-height: 50px;
      background-color: #0f0;
      border-radius: 10px;
      margin: 30px auto;
      text-align: center;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      opacity: 0;
      background-color: rgba(255,255,255,0);
      filter:alpha(opacity=0);
    }
    #container .pro-ct {
      width: 1140px;
      margin: 0 auto;
      padding: 100px 0;
      text-align: center;
    }
    #container .img-list {
      margin-left: -45px;
    }
    #container .img-list img {
      width: 350px;
    }
    #container .port-hover {
      width: 350px;
      height: 253px;
      background-color: #fed136;
      position: absolute;
      top: 0;
      opacity: 0;
    }
    #container .port-hover:hover {
      opacity: 0.5;
    }
    #container .img-list li {
      float: left;
      margin-left: 45px;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box">
      <div class="item hide"></div>
    </div>
    <div class="btn">加载更多</div>
  </div>
  <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script>
  function LoadMore($node){
    this.node = $node;
    this.box = $node.find(".box");
    this.btn = $node.find(".btn").data("loading",false);
    this.hide = this.box.find(".hide");
    this.item = this.box.find(".item");
    this.init();
  }
  LoadMore.prototype = {
    constructor:LoadMore,
    init:function(){
      this.page = 1;
      this.len = 16;
      this.bind();
      this.setItem();
      this.loadData();
      if(this.exposure()){
        this.loadData();
      }
    },
    bind:function(){
      var self = this,
          clock,
          timer;
      $(document).on("scroll",function(){
        if(self.exposure()){
          if(timer) clearTimeout(timer);
          setTimeout(function(){
            self.loadData();
          },10);
        }
      })
      $(window).on("resize",function(){
        clearTimeout(clock);
        clock = setTimeout(function(){
          self.setItem();
          self.items = self.box.find("li.item");
          self.waterFlowResize(self.items);
        },500);

      })
    },
    setItem:function(){
      this.arr = [];
      this.$width = this.item.outerWidth(true);
      $allWidth = this.box.width();
      this.num = Math.floor($allWidth/this.$width);
      for(var i = 0;i < this.num;i++){
        this.arr.push(0);
      }
    },
    exposure:function(){
      var scrT = $(document).scrollTop();
      var x = this.btn.offset().top;
      var hei = $(window).height();
      if(scrT + hei>= x){
        return true;
      }else{
        return false;
      }
    },
    loadData:function(){
      var self = this;
      if(this.btn.data("loading")) return;
      this.btn.data("loading",true);
      $.ajax({
        url:"//platform.sina.com.cn/slide/album_tech",
        type:"get",
        dataType:"jsonp",
        jsonp:"jsoncallback",
        data:{
          app_key:"1271687855",
          page:self.page,
          num:self.len
        }
      }).done(function(response){
        if(response && response.status.code === "0"){
          self.placeNode(response);
        }else{
          alert("请求数据失败，请稍后重试");
        }
        self.btn.data("loading",false);
      })
    },
    placeNode:function(ret){
      var self = this;
      var node = this.getNode(ret).appendTo(this.box);
        self.waterFlow(node);
      this.page += 1;
    },
    getNode:function(ret){
      node = "";
      for(var i = 0;i < ret.data.length;i++){
        node += '<li class="item"><a href="';
        node += ret.data[i].url + '" class="link"><img src="';
        node += ret.data[i].img_url + '" alt=""></a><h3 class="title">';
        node += ret.data[i].short_name + '</h3><p class="para">';
        node += ret.data[i].short_intro + '</p></li>';
      }
      $node = $(node);
      return $node;
    },
    waterFlow:function(node){
      var self = this;
      node.each(function(){
        var $this = $(this);
        $this.find("img").on("load",function(){
          var min = self.arr[0];
          idx = 0;
          for(var i = 0;i < self.arr.length;i++){
            if(min > self.arr[i]){
              min = self.arr[i];
              idx = i;
            }
          }
          $this.css({
            "top":min,
            "left":idx * self.$width,
            "opacity":"1"
          });
          self.arr[idx] += $this.outerHeight(true);
          self.hide.css("height",self.arr[idx]);
        })
      })
    },
    waterFlowResize:function(node){
      var self = this;
      node.each(function(){
        var $this = $(this);
          var min = self.arr[0];
          idx = 0;
          for(var i = 0;i < self.arr.length;i++){
            if(min > self.arr[i]){
              min = self.arr[i];
              idx = i;
            }
          }
          $this.css({
            "top":min,
            "left":idx * self.$width,
            "opacity":"1"
          });
          self.arr[idx] += $this.outerHeight(true);
          self.hide.css("height",self.arr[idx]);
        })
    }
  }
  new LoadMore($("#container"))
  </script>
</body>
</html>
